<template>
  <!-- tab切换  基础资料内容部分 -->
  <div class="jczl">
    <!-- <iframe
      id="iframe"
      :src="nameUrl"
      width="1000px"
      height="1000px"
      frameborder="0"
    ></iframe> -->
    <div class="url_box">
      <span>中文维基百科：</span>
      <span class="url_span" @click="goUrlFun">{{ aUrl }}{{ keyVal }}</span>
    </div>
    <div class="name_box scroll_box" v-html="nameHtml"></div>
    <!-- <div class="jczl_left flex">
      <div class="jczl_title">
        <div class="icon"></div>
        <div class="title">人物简介</div>
      </div>
      <div class="jczl_text">
        <div class="jianjie">
          <h2>简介</h2>
          <div class="text_con">
            陈水扁，1950年10月12日出生于台湾省台南市官田区西庄村，民主进步党籍政治人物。2000年当选台湾地区领导人。2004年成功连任台湾地区领导人。2008年卸任台湾地区领导人，卸任后因涉嫌贪污、洗钱，判刑20年。陈水扁执政台湾八年，实现了台湾地区历史上首轮政党轮替，任内提出“一边一国”论，积极推动“台独”，导致两岸关系恶化。
            2020年1月12日，陈水扁发文宣布退出政坛.陈水扁执政台湾八年，实现了台湾地区历史上首轮政党轮替，任内提出“一边一国”论，积极推动“台独”，导致两岸关系恶化。
          </div>
        </div>
        <div class="jianjie">
          <h2>从政经历</h2>
          <div class="text_con">
            陈水扁，1950年10月12日出生于台湾省台南市官田区西庄村，民主进步党籍政治人物。2000年当选台湾地区领导人。2004年成功连任台湾地区领导人。2008年卸任台湾地区领导人，卸任后因涉嫌贪污、洗钱，判刑20年。陈水扁执政台湾八年，实现了台湾地区历史上首轮政党轮替，任内提出“一边一国”论，积极推动“台独”，导致两岸关系恶化。
            陈水扁，1950年10月12日出生于台湾省台南市官田区西庄村，民主进步党籍政治人物。2000年当选台湾地区领导人。2004年成功连任台湾地区领导人。2008年卸任台湾地区领导人，卸任后因涉嫌贪污、洗钱，判刑20年。陈水扁执政台湾八年，实现了台湾地区历史上首轮政党轮替，任内提出“一边一国”论，积极推动“台独”，导致两岸关系恶化。
            陈水扁，1950年10月12日出生于台湾省台南市官田区西庄村，民主进步党籍政治人物。2000年当选台湾地区领导人。2004年成功连任台湾地区领导人。2008年卸任台湾地区领导人，卸任后因涉嫌贪污、洗钱，判刑20年。陈水扁执政台湾八年，实现了台湾地区历史上首轮政党轮替，任内提出“一边一国”论，积极推动“台独”，导致两岸关系恶化。
          </div>
        </div>
      </div>
    </div>
    <div class="jczl_right">
      <div class="top">
        <div class="jczl_title">
          <div class="icon"></div>
          <div class="title">任职经历</div>
          <div class="jczl_text">
            <el-timeline style="padding: 20px 0px">
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :timestamp="activity.timestamp"
                :placement="top"
              >
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="jczl_title">
          <div class="icon"></div>
          <div class="title">受教育情况</div>
          <div class="jczl_text">
            <el-timeline style="padding: 20px 0px">
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :timestamp="activity.timestamp"
                :placement="top"
              >
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      aUrl: "https://bk.tw.lvfukeji.com/wiki/", //地址
      keyVal: "", // 关键词
      activities: [
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
        },
        {
          content: "支持自定义颜色",
          timestamp: "2018-04-03 20:46",
          color: "#0bbd87",
        },
        {
          content: "支持自定义尺寸",
          timestamp: "2018-04-03 20:46",
          size: "large",
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03 20:46",
        },
      ],
      nameUrl: "",
      nameHtml: "",
    };
  },
  methods: {
    goUrlFun() {
      let url = this.aUrl + this.keyVal;
      // 打开一个新页面：
      window.open(url);
      // 跳转到新页面：
      // window.location.href = url;
    },
  },
  mounted() {
    // console.log("看看：", this.$route.params.name);
    // console.log(escape(this.$route.params.name));
    if (this.$route.params.name) {
      localStorage.basicName = this.$route.params.name;
    }
    // 我要赋值
    if (this.$route.query.name) {
      localStorage.basicName = this.$route.query.name;
      // 关键词赋值
      localStorage.inputValue = this.$route.query.name;
    }
    let iframe = document.getElementById("iframe");
    // 有传值，用传值，没有就用本地缓存：
    let bName = this.$route.params.name || localStorage.basicName;
    this.keyVal = this.$route.params.name || localStorage.basicName;
    // console.log("这都是啥啊", localStorage.basicName);
    // this.nameUrl = `http://192.168.2.110:8000/index.php/${encodeURI(bName)}`;
    this.$api.getBasicData(bName).then((res) => {
      // console.log("html:", res);
      this.nameHtml = res;
    });
  },
};
</script>

<style lang="scss" scoped>
// 我手动在这里加：
@import "~@/assets/weiji.css";

.jczl {
  width: 100%;
  // overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .url_box {
    box-sizing: border-box;
    padding: 10px;
    .url_span {
      // font-weight: bold;
      cursor: pointer;
      border-bottom: 1px solid #000;
    }
  }
  .name_box {
    // overflow: scroll;
    width: 100%;
    max-height: 680px;
    // flex: 1;
    overflow-y: scroll;
    overflow-x: auto;
  }
  .jczl_left {
    width: 65%;
    height: 620px;
    overflow-y: auto;
    flex: 3;
    background: #fff;
    margin-right: 20px;
    border-top: 2px solid #2d73ff;
    padding: 30px;
    .jczl_title {
      width: 100%;
      .icon {
        margin-right: 0.05rem;
        width: 0.1rem;
        height: 0.25rem;
        background-image: url(~@/assets/common/title-item.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
      .title {
        width: 300px;
        font-weight: 900;
        font-size: 22px;
        line-height: 30px;
        margin-top: -25px;
        margin-left: 20px;
      }
    }
    .jczl_text {
      margin-top: 30px;
      margin-left: -300px;
      padding: 30px 10px;
      .el-timeline-item__node {
        background: url(../../assets/common/时间轴点.png);
      }
      h2 {
        font-weight: 500;
        font-size: 20px;
      }
      .text_con {
        text-indent: 40px;
        letter-spacing: 2px;
        line-height: 30px;
      }
    }
  }
  .jczl_right {
    width: 30%;
    height: 600px;
    flex: 1;
    .top {
      height: 350px;
      margin-bottom: 30px;
      background: #fff;
      border-top: 2px solid #2d73ff;
      padding: 30px;
      .jczl_title {
        width: 100%;
        .icon {
          margin-right: 0.05rem;
          width: 0.1rem;
          height: 0.25rem;
          background-image: url(~@/assets/common/title-item.png);
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }
        .title {
          width: 300px;
          font-weight: 900;
          font-size: 22px;
          line-height: 30px;
          margin-top: -25px;
          margin-left: 20px;
        }
      }
    }
    .bottom {
      height: 300px;
      background: #fff;
      border-top: 2px solid #2d73ff;
      padding: 30px;
      .jczl_title {
        width: 100%;
        .icon {
          margin-right: 0.05rem;
          width: 0.1rem;
          height: 0.25rem;
          background-image: url(~@/assets/common/title-item.png);
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }
        .title {
          width: 300px;
          font-weight: 900;
          font-size: 22px;
          line-height: 30px;
          margin-top: -25px;
          margin-left: 20px;
        }
      }
    }
  }
}

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/

.scroll_box::-webkit-scrollbar {
  width: 10px; /*对垂直流动条有效*/
  height: 10px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
.scroll_box::-webkit-scrollbar-track {
  // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f8f9fa;
  border-radius: 10px;
}

/*定义滑块颜色、内阴影及圆角*/
.scroll_box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #ccc;
}

/*定义两端按钮的样式*/
.scroll_box::-webkit-scrollbar-button {
  // background-color: cyan;
}

/*定义右下角汇合处的样式*/
.scroll_box::-webkit-scrollbar-corner {
  background: #ccc;
}
</style>
